<template>
	<uv-navbar
	  :fixed="false"
	  @leftClick="$onClickLeft"
	  bgColor="#09b4f1"
	>
		<template v-slot:left>
			<uv-icon name="arrow-left" size="19" color="#ffffff"></uv-icon>
		</template>
		<template v-slot:center>
			<text style="color:#ffffff">{{title}}</text>
		</template>
	</uv-navbar>
	<view class="container">
		<view class="wrap">
			<uv-tabs :list="list" @click="handleSelect" :scrollable="false" :lineWidth="60"></uv-tabs>
			<scroll-view scroll-y class="sv" :style="{height:scrollHeight+'px'}" :scroll-top="scrollTop" @scroll="scroll"  @scrolltolower="reachBottom">
				<view class="page-box">
					<block v-if="dataList.length > 0">
						<view class="client" v-for="(items, index) in dataList" :key="index" @click="onItem(items.typesId)">
							<view class="top">
								<view class="left uv-line-1">
									<view class="store uv-line-1">{{type == 'receivables' ? items.otherNo : items.otherName}}</view>
								</view>
								<view class="flex">
									<uv-text v-if="items.status === 0" type="warning" text="待审核"></uv-text>
									<uv-text v-else-if="items.status === 1" type="success" text="审核通过"></uv-text>
									<uv-text v-else type="error" text="审核拒绝"></uv-text>
									<uv-icon name="arrow-right" :size="20"></uv-icon>
								</view>
							</view>
							<view class="item align-center">
								<view class="content" v-if="type == 'contract'">
									{{items.remark ? items.remark : items.otherUser + '发起了一个《订单》审批,待您审批哦！'}}
								</view>
								<view class="content" v-if="type == 'receivables'">
									{{items.remark ? items.remark : items.otherUser + '发起了一个《回款》审批,待您审批哦！'}}
								</view>
								<view class="content" v-if="type == 'invoice'">
									{{items.remark ? items.remark : items.otherUser + '发起了一个《发票》审批,待您审批哦！'}}
								</view>
							</view>
							<view class="bottom">
								<view class="client_time" v-if="items.adminTime">审核时间：{{formatDateTime(items.adminTime)}}</view>
								<view class="client_time" v-else>发起时间：{{formatDateTime(items.createTime)}}</view>
								<view class="flex">
									<block v-if="items.status == 0">
										<view class="btn ml-1 primary" @click.stop="selectShow5('agree',items.id)">通过</view>
										<view class="btn ml-1 danger" @click.stop="selectShow5('refuse',items.id)">拒绝</view>
									</block>
								</view>
							</view>
						</view>
						<uv-load-more :status="listStatus" ></uv-load-more>
					</block>
					<uv-empty text="暂无数据" v-else  margin-top="50" mode="list"></uv-empty>
				</view>
			</scroll-view>
		</view>
		<uv-popup  mode="bottom" round="38"  ref="selectShowRef5" >
			<view class="popup-content">
				<view class="popup-title">
					<view class=""  style="width: 45px;">
					</view>
					<text class="">输入理由</text> 
					<view class="" @click="selectShowClose5" style="width: 45px;">
						<uv-icon name="close"  color="#909399" size="30"></uv-icon>
					</view>
				</view>
				<view style="height: 500rpx;padding: 20rpx;">
					<uv-textarea v-model="formData.remark"  placeholder="输入理由"></uv-textarea>
				</view>
				<view style="padding: 20rpx;">
					<uv-button  color="#09b4f1"  @click="submitCheck" >确定</uv-button>
				</view>
		
			</view>
		</uv-popup>
	</view>
</template>

<script setup>
import {
	ref,
	unref,
	computed
} from 'vue'
import { onLoad,onShow ,onReady,onPageScroll} from '@dcloudio/uni-app'
import {
  getFlowLog,
  examine
} from '@/api/contract'
import { formatDateTime } from '@/utils/util'
const title = ref('审批信息')
const keyword = ref('')
const oldScrollTop = ref(0)
const scrollTop = ref(-1)
const dataList = ref([])
const relation = ref(0)
const list = ref( 
	[{
		name: '待我审批待',
		value: 0
	}, {
		name: '我已审批待',
		value: 1
	}]
)

const current = ref(0)
const dx = ref(0)
const pH = ref(0)
const scrollHeight = ref(0)
const page = ref(1)
const pageSize = ref(10)
const lastPage = ref(false)
const listStatus = ref('loadmore')
const isRefresh = ref(false)
const type = ref('contract')
const formData = ref({
  ids: undefined,
  remark: undefined,
  checkType: undefined,
})

defineExpose({isRefresh})

onReady(()=>{
	uni.getSystemInfo({ 
		success(res) {
			pH.value = res.windowHeight 
			let scrollH = uni.createSelectorQuery().select(".sv")
			scrollH.boundingClientRect(data=>{
				let pH0 = pH.value
				scrollHeight.value = pH0 - data.top 
			}).exec()
		}
	})
})

onLoad((e) => {
   console.log('e:',e.type)
   type.value = e.type
})

onShow(()=>{
	isRefresh.value = false
	page.value = 1
	lastPage.value = false
	scrollTop.value = 0
	dataList.value = []
	getList()
	
})

const selectShowRef5 = ref()
const selectShow5 = async(type,id) => {
	formData.value.ids = [id]
	formData.value.checkType = type
	unref(selectShowRef5).open()
}
const selectShowClose5 = () => {
	unref(selectShowRef5).close()
}


const handleSelect = (key) => {
  relation.value = key.value
	page.value = 1
	dataList.value= []
  getList()
}


const submitCheck = async() => {
	if(formData.value.remark == ''){
		uni.showToast({
			icon: 'error',
			title: '请填写理由'
		})
		return
	}
	await examine(formData.value)
	
	uni.showToast({
		title: '审核成功',
		icon: 'success',
		duration: 2000
	})
	isRefresh.value = false
	page.value = 1
	lastPage.value = false
	scrollTop.value = 0
	formData.value.remark = ""
	dataList.value = []
	getList()
	selectShowClose5()
}

const getList = async(isNextPage,pages) => {

	await getFlowLog({
		pageNo: page.value,
		pageSize: pageSize.value,
		status: relation.value,
		types:type.value,
	}).then(res => {
		if(res) {
			if (res.list.length < 10) {
				listStatus.value = 'nomore'
			}

			if(res.list.length == 0) {
				lastPage.value = true
			} 

			if(isNextPage) {
				dataList.value = dataList.value.concat(res.list)
				return 
			}
			dataList.value = res.list
		}
	})
}

const scroll = (e) => {
	oldScrollTop.value = e.detail.scrollTop
}

const reachBottom = () => {
	if(lastPage.value || listStatus.value == 'loading') return ;
	listStatus.value = 'loading'
	setTimeout(() => {
		if(lastPage.value) return ;
		getList(true,++page.value)
		if(dataList.value.length >= 10) listStatus.value = 'loadmore';
		else listStatus.value = 'loading';
	}, 1200)
}


const onItem = (val) => {
	var url2 =  '/pages/components/pages/contract/add?id=' +val + '&type=check'
	if(type.value == 'receivables'){
		url2 =  '/pages/components/pages/receivables/add?id=' +val + '&type=check'
	}else if(type.value == 'invoice'){
		url2 =  '/pages/components/pages/invoice/add?id=' +val + '&type=check'
	}
	uni.navigateTo({
		url: url2
	});
}



</script>

<style lang="scss" scoped>
.container {
	background-color: #F7F7F7;
	min-height: 100vh;
}
.page-box {
	padding: 20rpx 20rpx 45rpx;
}
.client {
	width: 710rpx;
	background-color: #ffffff;
	margin-bottom: 20rpx;
	border-radius: 20rpx;
	box-sizing: border-box;
	padding: 20rpx;
	font-size: 28rpx;
	.top {
		display: flex;
		.left {
			display: flex;
			align-items: center;
			flex: 1;
			.store {
				font-size: 28rpx;
				font-weight: bold;
				padding-right: 50rpx
			}
		}
	}
	.item {
		display: flex;
		margin: 20rpx 0 0;
		.content {
			flex: 1;
			.title {
				font-size: 28rpx;
				line-height: 50rpx;
			}
			.type {
				margin: 10rpx 0;
				font-size: 24rpx;
				color: $uv-tips-color;
			}
		}
		.right {
			margin-left: 10rpx;
			text-align: right;
			.decimal {
				font-size: 24rpx;
				margin-top: 4rpx;
			}
			.number {
				color: $uv-tips-color;
				font-size: 24rpx;
			}
		}
	}
	.bottom {
		display: flex;
		margin-top: 20rpx;
		justify-content: space-between;
		align-items: center;
		.client_time {
			color: #777;
			font-size: 26rpx;
		}
		.btn {
			line-height: 56rpx;
			padding: 0rpx 25rpx;
			border-radius: 5px;
			font-size: 26rpx;
			text-align: center;
			color: $uv-info-dark;
		}
		.entity {
			color: #fff;
			background-color: #FF6146; 
		}
		.primary {
			color: #FFF;
			background-color: #09b4f1
		}
		.danger {
			color: #FFF;
			background-color: #dc3545
		}
	}
}
.wrap {
	display: flex;
	flex-direction: column;
	width: 100%;
}



.popup-content {
	.popup-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		font-size: 35rpx;
		font-weight: 600;
		text-align: center;
		height: 50px;
		padding-right: 25rpx;
	}
	.list {
		margin-bottom: 45rpx;
		.item {
			padding: 0 25rpx;
			justify-content: space-between;
			height: 45px;
			.title {
				flex: 1;
				font-size: 28rpx;
				font-weight: 600;
			}
			.check-icon {
				text-align: center;
				width: 100rpx;
			}
		}
	}
	.bottom_btn {
		display: flex;
		justify-content: flex-end;
		padding: 28rpx 10rpx 45rpx;
	}
}


</style>
